import React from "react";
import TabBar from "@/components/TabBar";
import '@/style/css/user.css';
import Top from "@/components/Top";

const Index = () =>
{
    const [business] = useState<any>(React.Cookies.load('business') ?? {});

    const onLogout = () => 
    {
        React.UI.Dialog.confirm({
            title:'退出账号',
            content:'是否确认退出当前账号？',
            onConfirm:() =>
            {
                React.toast('退出当前账号成功',() =>
                    {
                        React.Cookies.remove('business');
    
                        React.navigate('/business/login');
                    })
            }
        })
    }

    return (
        <>
            <Top>个人中心</Top>
        
        {/* <!-- 头部 --> */}
        <div className="header">
            <div className="userinfo">
                <div className="avatar">
                    <img src={business.avatar_cdn} alt="" />
                </div>
                <div className="nickname">{ business.nickname }</div>
            </div>
            <div className="corrugated">
                <div className="wave-top wave-item"></div>
                <div className="wave-middle wave-item"></div>
                <div className="wave-bottom wave-item"></div>
            </div>
        </div>
        <div className='menu-cell'>
                        <div className='item'>
                            <Link to={'/business/profile'}>
                                <div className='title'>个人资料</div>
                                <div className='icon'>
                                    <img src='/assets/images/right.png' />
                                </div>
                            </Link>
                        </div>

                        <div className='item'>
                            <Link to={'/business/email'}>
                                <div className='title'>邮箱验证</div>
                                <div className='icon'>
                                    <img src='/assets/images/right.png' />
                                </div>
                            </Link>
                        </div>

                        <div className='item'>
                            <Link to={'/guest'}>
                                <div className='title'>住客信息</div>
                                <div className='icon'>
                                    <img src='/assets/images/right.png' />
                                </div>
                            </Link>
                        </div>

                        <div className='item'>
                            <Link to={'/order'}>
                                <div className='title'>我的订单</div>
                                <div className='icon'>
                                    <img src='/assets/images/right.png' />
                                </div>
                            </Link>
                        </div>

                        <div className='item'>
                            <Link to={'/coupon'}>
                                <div className='title'>我的优惠券</div>
                                <div className='icon'>
                                    <img src='/assets/images/right.png' />
                                </div>
                            </Link>
                        </div>

                        <div className='item' onClick={onLogout}>
                            <a>
                                <div className='title'>退出登陆</div>
                                <div className='icon'>
                                    <img src='/assets/images/right.png' />
                                </div>
                            </a>
                        </div>
            </div>

        <TabBar />
        </>
        
    )
}

export default Index;